<template>
    <div @click="openConversation"
         :class="{active:conversation.id===currentConversation.id}"
         v-if="toUser" class="conversation">
      <el-avatar  shape="square"
                 :src="toUser.avatar"></el-avatar>
      <div class="unread" v-if="conversation.unread>0" >{{conversation.unread>99?'99+':conversation.unread}}</div>
      <div class="text">
        <div class="name">{{toUser.username}}</div>
        <span class="message">{{messageContent}}</span>
      </div>
      <div class="time">
        {{messageTime}}
      </div>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getConversationListMessage,modifyMessageStatus} from "@/api/conversation";
  import {sendMessage} from "@/websocker";
  import messageType from "@/utils/message-type";
    export default {
        name: "Conversation",
      props:{
          conversation:{
            type:Object,
            default(){
              return {}
            }
          },
      },
      computed:{
          ...mapGetters([
            'id','friendList','currentConversation','conversationMessagesList'
          ]),
          // toUser用户的信息；聊天对象的信息
          toUser(){
            let {fromId, toId} = this.conversation;
            let id = fromId === this.id ? toId : fromId;
            return this.friendList.filter(item=>item.userid === id)[0]
          },
        // 消息时间
        messageTime(){
          let {lastMessage} = this.conversation
            if(lastMessage){
              let time = lastMessage.sendTime
              return new Date(parseInt(time)).toLocaleString()
            }else return ''
        },
        // 消息内容
        messageContent(){
          let {lastMessage} = this.conversation
          if(lastMessage){
            switch (lastMessage.type) {
              case 1:
                return lastMessage.content
              case 2:
                return "[图片]"
              case 3:
                return "[视频]"
            }
          }else return ''
        },
      },
      methods:{
        // 打开当前选择的会话窗口
       async openConversation(){
          // 从会话消息列表中获取指定会话的消息列表对象
         let messages = this.conversationMessagesList.filter(item =>
           item.conversationId === this.conversation.id);
         this.$store.commit('chat/SET_CURRENT_CONVERSATION', this.conversation);
          // 判断是否存在
          if(messages.length === 0){
            await getConversationListMessage(this.conversation.id,0).then(res=>{
              res.content.messages.reverse()
              this.$store.commit('chat/ADD_CONVERSATION_MESSAGES_LIST',res.content)
            })
          }

         modifyMessageStatus(this.conversation.id,true).then(res=>{
           if(res.code === 2000){
             sendMessage({
               conversationId:this.conversation.id,
               toId:this.toUser.userid,
               fromId:this.id,
               form:messageType.MESSAGE_READ
             })
             this.$set(this.conversation,'unread',0)// 未读消息清空
           }
         })
         // this.$store.commit('chat/SET_CURRENT_CONVERSATION', this.conversation);
          this.$emit('scrollbarBottom')
        }
      }
    }
</script>

<style lang="scss" scoped>
  .conversation{
    display: flex;
    position: relative;
    width: 100%;
    height: 60px;
    font-size: 11px;
    /* 光标变小手 */
    cursor: pointer;
    color: #b0a4a4;
    .el-avatar{
      margin: 10px 12px;
    }
    .unread{
      position: absolute;
      left: 45px;
      min-width: 18px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      border-radius: 50%;
      color: #ffffff;
      background-color: red;
    }
    .text{
      flex: 3;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .name{
        margin: 12px 0 8px;
        font-size: 13px;
        color: black;
      }
    }
    .time{
      flex: 1;
      padding-right:4px;
      margin-top: 14px;
    }
    &:hover{
      background-color: #e3e5e5;
    }
  }
  .active{
    background-color: #c4c7c7;
  }
  .active:hover{
    background-color: #c4c7c7;
  }
</style>
